<template>
	<view>
		<u-navbar 	:is-back="true" 
					back-icon-color="#ffffff"
					title="摇一摇" 
					:background="{ background: '#101010'}" 
					title-color="#ffffff"
					:title-bold="true" 
					title-size="34" 
					:border-bottom="false" 
					z-index="1001">
			<view slot="right" class="u-p-r-30" @click="toSet()">
				<u-icon name="more-dot-fill" color="#ffffff" :size="36"></u-icon>
			</view>		
		</u-navbar>
		
		<view class="u-flex u-row-center u-col-center" style="padding-top: 60%;">
			<view>
				<u-image src="/static/image/wx/yaoyiyao-1.jpg" :width="200" :height="200"></u-image>
			</view>
		</view>
		<view class="footer-box u-flex u-row-around u-col-center">
			<view @click="activeTab=0">
				<view class="u-flex u-row-center u-col-center">
					<view>
						<u-image v-if="activeTab==0" src="/static/image/wx/yaoyiyao-2.jpg" :width="48" :height="48"></u-image>
						<u-image  v-if="activeTab==1" src="/static/image/wx/yaoyiyao-b.jpg" :width="48" :height="48"></u-image>
					</view>
				</view>
				<view class="u-m-t-8"  :style="activeTab==1?'color:#595959;':''">
					<text>人</text>	
				</view>
			</view>
			<view  @click="activeTab=1">
				<view class="u-flex u-row-center u-col-center">
					<view>
						<u-image  v-if="activeTab==0" src="/static/image/wx/yaoyiyao-3.jpg" :width="48" :height="48"></u-image>
						<u-image  v-if="activeTab==1" src="/static/image/wx/yaoyiyao-c.jpg" :width="48" :height="48"></u-image>
					</view>
				</view>
				<view class="u-m-t-8" :style="activeTab==0?'color:#595959;':''">
					<text>歌曲和哼唱</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab:0,
			};
		},
		methods:{
			toSet:function(){
				console.log("去摇一摇设置");
				this.$u.route("/pages/tabbar/find/yaoyiyao/yaoyiyao-set");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.footer-box{
		color: #ffffff;
		width: 100%;
		position: absolute;
		bottom: 80rpx;
		padding: 20rpx 100rpx;
		text-align: center;
		font-size: 22rpx;
	}
</style>
<style>
	page{
		background-color: #101010;
	}
</style>
